<template>
	<div class="tabbar-edit-container">
		<!-- 添加导航 -->
		<div class="button-card">
			<el-button type="primary" size="default" @click="addTabbarItem" v-if="editType == 0">添加导航</el-button>
			<el-button type="warning" size="default" @click="doViewSort">调整顺序</el-button>
		</div>

		<div class="info_form">
			<!-- {{ props.data.data }} -->
			<el-card class="box-card" v-for="(item, index) in state.data" :key="index">
				<template #header>
					<div class="card-header">
						<span>导航 {{ index + 1 }}</span>
						<el-button class="button" type="danger" size="small" v-if="item.isDelete" @click="deleteItem(index)">删除</el-button>
					</div>
				</template>
				<el-form label-width="120px">
					<el-form-item label="导航名：">
						<el-input placeholder="请输入导航名" v-model="state.data[index].title" />
					</el-form-item>
					<el-form-item label="导航名颜色：">
						<el-color-picker v-model="state.data[index].textColor" />
					</el-form-item>
					<el-form-item label="未选中图标：">
						<Upload :fileUrl="state.data[index].icon" :index="index" @handleAvatarSuccess="handleAvatarSuccess" />
					</el-form-item>
					<el-form-item label="选中图标：">
						<Upload :fileUrl="state.data[index].activeIcon" :index="index" @handleAvatarSuccess="handleActiveIconSuccess" />
					</el-form-item>

					<comOption :data="item" :index="index" @change="actionChange"></comOption>
				</el-form>
			</el-card>
		</div>
		<el-button class="btn" @click="submit">
			<el-icon class="el-icon--right">
				<ArrowLeft />
			</el-icon>
			生成预览</el-button
		>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onBeforeMount, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import Upload from '/@/components/upload/index.vue';
import comOption from '/@/components/comOption/index.vue';

const editType = ref(0);

const props = defineProps({
	data: {
		type: Object,
		default: () => {},
	},
});

const state = reactive({
	data: [],
	itemMaxNum: 5,
});

const addTabbarItem = () => {
	if (state.data.length < state.itemMaxNum) {
		let par = {
			isDelete: true,
			textColor: '#000',
		};
		state.data.push(par);
	} else if (state.data.length >= state.itemMaxNum) {
		ElMessage({
			message: `底部导航栏最多${state.itemMaxNum}个导航。`,
			type: 'warning',
		});
	}
};

function doViewSort() {
	let sortArr = [];

	state.data.forEach((item) => {
		Object.assign(item, {
			...item,
			sortImg: item.icon,
			sortName: item.title,
		});
		console.log('🚀 ~ file: TabbarEdit.vue:85 ~ state.data.forEach ~ item:', item);
	});
	// tabbarCom
	// console.log('state.data', state.data)
	emit('openSort', {
		type: 'tabbarCom',
		list: state.data,
		data: state.data,
		index: props.data.index,
	});
}

const actionChange = (actionData) => {
	state.data[actionData.index] = {
		...state.data[actionData.index],
		...actionData.action,
		link: actionData.action.miniPage,
	};
};

// 删除
const deleteItem = (cur: number) => {
	state.data.splice(cur, 1);
};

const handleAvatarSuccess = (data) => {
	// console.log(data)
	const { url, index } = data;
	state.data[index].icon = url;
};

const handleActiveIconSuccess = (data) => {
	const { url, index } = data;
	state.data[index].activeIcon = url;
};

// 用于判断 data 是否有数据并且是什么数据类型
function judgment() {
	if (props.data?.data instanceof Array) {
		state.data = JSON.parse(JSON.stringify(props.data.data));
	} else {
		state.data = JSON.stringify(props.data) === '{}' ? [] : JSON.parse(JSON.stringify(props.data.data.list));
	}
}

watch(
	() => props.data,
	(val) => {
		judgment();
	}
);
onBeforeMount(() => {
	judgment();
});

const emit = defineEmits(['submit', 'openSort']);
function submit() {
	emit('submit', {
		type: 'tabbarCom',
		data: state.data,
		index: props.data.index,
	});
}
</script>

<style lang="scss" scoped>
.info_form {
	width: 100%;
	height: 60vh;
	overflow: auto;
}

.tabbar-edit-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;

	.button-card {
		width: 100%;
		margin-bottom: 21px;
	}

	.box-card {
		width: 100%;
		margin-bottom: 21px;

		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		// .avatar-uploader {
		// 	width: 60px;
		// 	height: 60px;
		// 	border: 1px dashed #dcdfe6;

		// 	.avatar-uploader-icon {
		// 		width: 60px;
		// 		height: 60px;
		// 	}
		// }
	}
}

.btn {
	width: 100%;
}
</style>
